<script setup lang="ts">
import { ref, watch } from 'vue';

import { useAccessStore } from '@vben/stores';

// const props = defineProps<{
//   modelValue?: boolean,
// }>()
import { PlusOutlined } from '@ant-design/icons-vue';

// function getBase64(img: Blob, callback?: (base64Url: string) => void) {
//   const reader = new FileReader();
//   reader.addEventListener(
//     'load',
//     () => callback && callback(reader.result as string),
//   );
//   reader.readAsDataURL(img);
// }

const formState: any = defineModel();
const qualificationRule = ref(formState.value.rule?.qualificationRule);
watch(formState, (newVal) => {
  // console.log('newVal', newVal);
  qualificationRule.value = newVal.rule?.qualificationRule;
});

const accessStore = useAccessStore();

const handleCancel = (item: any) => {
  item.previewVisible = false;
  item.previewTitle = '';
};

const handlePreview = async (file: any, item: any) => {
  // console.log('file', file.response.data[0], item);
  // if (!file.url && !file.preview) {
  //   file.preview = (await getBase64(file.originFileObj)) as any;
  // }
  item.previewImage = file.thumbUrl;
  item.previewVisible = true;
  item.previewTitle = file.name || '';
};
const upUrl = `${location.origin}/weitong/file/uploadFile`;
</script>

<template>
  <div v-if="qualificationRule">
    <a-form layout="vertical">
      <template v-for="item in qualificationRule" :key="item.key">
        <a-form-item
          :label="item.name"
          :rules="[
            {
              required: !!item.isRequired,
              message: `该项为必填，请输入`,
            },
          ]"
        >
          <div class="clearfix">
            {{ console.log('item.fileList', item.fileList) }}
            <a-upload
              v-model:file-list="item.fileList"
              :action="upUrl"
              :data="{
                shopId: formState.shopId,
                offerId: formState.offerId,
              }"
              :headers="{
                Authorization: `Bearer ${accessStore.accessToken}`,
              }"
              list-type="picture-card"
              multiple
              name="files"
              @preview="(file: any) => handlePreview(file, item)"
            >
              <div v-if="item.fileList.length < 20">
                <PlusOutlined />
                <div style="margin-top: 8px">选择文件</div>
              </div>
            </a-upload>
            <a-modal
              :footer="null"
              :open="item.previewVisible"
              :title="item.previewTitle"
              @cancel="() => handleCancel(item)"
            >
              <img :src="item.previewImage" alt="example" style="width: 100%" />
            </a-modal>
          </div>
          <!-- <a-upload
            v-model:file-list="fileList"
            :before-upload="beforeUpload"
            :data="{
              shopId: formState.shopId,
            }"
            :headers="{
              Authorization: `Bearer ${accessStore.accessToken}`,
            }"
            :show-upload-list="false"
            action="https://dly1688.lntelliai.com/weitong/file/uploadFile"
            class="avatar-uploader"
            list-type="picture-card"
            name="files"
            @change="handleChange"
          >
            <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
            <div v-else>
              <LoadingOutlined v-if="loading" />
              <PlusOutlined v-else />
              <div class="ant-upload-text">上传</div>
            </div>
          </a-upload> -->
        </a-form-item>
      </template>
    </a-form>
  </div>
</template>
